<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="BlueCat">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>西蜀小红娘</title>
  <link rel="stylesheet" href="https://cdn.staticfile.net/normalize/8.0.1/normalize.min.css">
  <style>
    img {
      width: 100vw;
    }

    form {
      padding: 0.4rem;
    }

    form>input {
      box-sizing: border-box;
      width: 100%;
      height: 1.333rem;
      display: block;
      border: none;
      border-radius: 0.133rem;
      background-color: #F1F1F1;
      padding: 0.4rem;
      font-size: 0.4rem;
      margin-bottom: 0.4rem;
      outline: none;
    }

    label {
      display: flex;
      align-items: center;
      margin-bottom: 0.4rem;
      font-size: 0.373rem;
    }

    label>input {
      width: 0.533rem;
      height: 0.533rem;
      margin-right: 0.267rem;
    }

    label>#myCheckbox[type="checkbox"] {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 1px solid #aaaaaa;
      border-radius: 50%;
    }

    label>#myCheckbox[type="checkbox"]:checked {
      border: 1px solid #F4625C;
      background-image: url(https://pic.xishuw.com/cdn/image/2024-04-12/xR6jYHyy.png);
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: center;
    }

    label>span {
      color: #7D7F7F;
    }

    a {
      text-decoration: none;
      color: #869BBC;
    }

    button {
      width: 100%;
      display: block;
      height: 1.333rem;
      border: none;
      border-radius: 0.133rem;
      padding: 0.4rem;
      font-size: 0.427rem;
      background-color: #F6615B;
      color: #fff;
    }
  </style>
</head>

<body>
  <img src="https://pic.xishuw.com/cdn/image/2024-04-12/dMCCPiSw.jpg" alt="">
  <form action="#" method="post" id="myForm">
    <input id="phoneInput" type="number" placeholder="电话号码" />
    <input id="nameInput" type="text" placeholder="姓名" />
    <label>
      <input type="checkbox" id="myCheckbox" checked />
      <span>已阅读并同意<a href="./private.html">《个人信息与隐私保护条款》</a></span>
    </label>
    <button type="submit">提交表单</button>
  </form>
  <script src="https://pic.xishuw.com/cdn/lib-flexible/0.3.2/flexible.min.js"></script>
  <script src="https://cdn.staticfile.net/layer/3.5.1/mobile/layer.min.js"></script>
  <script src="https://cdn.staticfile.net/zepto/1.2.0/zepto.min.js"></script>
  <script>
    function validatePhoneNumber(phoneNumber) {
      let regex = /^1[3456789]\d{9}$/;
      return regex.test(phoneNumber);
    }

    function isValidName(name) {
      const regex = /^[a-zA-Z\u4e00-\u9fa5]+( [a-zA-Z\u4e00-\u9fa5]+)*$/;
      return regex.test(name);
    }

    function showMessage(message) {
      layer.open({ content: message, skin: 'msg', time: 2 })
    }

    $(document).ready(function () {
      $('#myForm').on('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为
        var phone = $('#phoneInput').val().trim();
        var name = $('#nameInput').val().trim();
        var isAgreed = $('#myCheckbox').is(':checked');

        // 检查电话号码和姓名是否已填写
        if (!phone) {
          showMessage('请填写电话号码')
          return false
        }
        if (!validatePhoneNumber(phone)) {
          showMessage('请填写正确的电话号码')
          return false;
        }
        if (!name) {
          showMessage('请填写姓名')
          return false;
        }
        if (!isValidName(name)) {
          showMessage('请填写正确的姓名')
          return false;
        }
        // 检查是否同意隐私保护条款
        if (!isAgreed) {
          showMessage('请同意《个人信息与隐私保护条款》！')
          return false;
        }
        showMessage('提交成功！')
        $('#phoneInput').val('')
        $('#nameInput').val('')
      });
    });
  </script>
</body>

<script>
</script>

</html>
